<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网站用户名验证</title>
  </head>
  <body>
    <input type="text" name="username" />
    <input type="text" name="password" />
  </body>
</html>

<script>
  document.querySelector(`[name="username"]`).addEventListener("keyup", (e) => {
    const value = e.target.value;
    let reg = /^[a-z][\w-]{2,7}$/i;
    console.log(reg.test(value));
  });

  document.querySelector(`[name="password"]`).addEventListener("keyup", (e) => {
    const value = e.target.value;
    const regs = [/^[a-z0-9]{5,10}$/i, /[0-9]/, /[A-Z]/];
    let state = regs.every((e) => e.test(value));
    console.log(state);
  });
</script>
